<template>
  <div id="captcha-view" class="stepper">
    <div class="upper">
      <div class="title">输入验证码</div>
    </div>
    <div class="desc">
      6位数字验证码已经发送至
      <a>{{this.currentPhone}}</a>
    </div>
    <div class="captcha-input-box">
      <captcha-box ref="captchaBox" v-model="captcha" :maxlength="6" @submit="onCaptchaSubmit" />
    </div>
    <div class="captcha-status">
      <div v-if="sent">
        <a>{{countdownTimer}}秒</a>后重新获取验证码
      </div>
      <div v-if="!sent" class="row">
        <a @click="getCaptcha('1')">重新发送验证码</a>
        <a class="ml-2" @click="getCaptcha('2')">语音验证</a>
      </div>
    </div>
  </div>
</template>
<script>
import '@/assets/svgs/snyc_nav_fh.svg';
import { GET_CAPTCHA_SUCCESS, GET_CAPTCHA_FAILED, SET_START_CITY_OBJ } from '@/store/mutations.types';
import { LOGIN, GET_CAPTCHA, GET_CURRENT_LOCATION } from '@/store/actions.types';
import { GPS_UNKNOWN, GPS_LOCATING, GPS_SUCCESS, GPS_ERROR } from '@/store/gps.types';
import { Button, Toast, Icon, Dialog } from 'mand-mobile';
import { mapGetters } from 'vuex';
import CaptchaBox from '@/components/CaptchaBox';
export default {
  name: 'captcha-view',
  components: {
    [Button.name]: Button,
    [Icon.name]: Icon,
    [Toast.name]: Toast,
    [Dialog.name]: Dialog,
    [CaptchaBox.name]: CaptchaBox
  },
  data() {
    return {
      captcha: '',
      sent: false,
      countdownInstance: null,
      countdownTimer: 59,
      isMini: false,
      action: undefined
    };
  },
  created() {
    if (this.$route.query.phone) {
      this.$store.commit('setCurrentPhone', this.$route.query.phone);
      this.getCaptcha();
    } else {
      this.getCaptcha();
    }
    this.$store.commit('setLoginMode', 'captcha');
    const query = this.$route.query;
    if (query.action) {
      this.action = query.action;
    }
  },
  methods: {
    onCaptchaSubmit() {
      let query = this.$route.query;
      if (query.next === 'SetLoginPassword') {
        this.$store
          .dispatch('checkCaptcha', { user_phone: this.currentPhone, mobileCode: this.captcha })
          .then(() => {
            this.$router.replace({
              name: query.next,
              query
            });
          })
          .catch(reason => {
            Toast({
              content: reason.message,
              duration: 2000
            });
            this.$refs.captchaBox.reset();
          });
      } else {
        this.doLogin();
      }
    },
    doLogin() {
      let params = {
        user_phone: this.currentPhone,
        mobileCode: this.captcha
      };
      if (this.getOpenId) {
        params.openId = this.getOpenId;
      }
      if (this.getUnionId) {
        params.unionid = this.getUnionId;
      }
      if (this.getPlatformId) {
        params.app_id = this.getPlatformId;
      }
      if (this.gpsStatus === GPS_SUCCESS) {
        params.coordinate = this.getCurrentLocation.coordinate.join(',');
      }
      this.$store
        .dispatch('getLoginByCode', params)
        .then(() => {
          let query = this.$route.query;
          let next = {
            name: 'Home'
          };
          if (query.next) {
            next.name = query.next;
            delete query.next;
            next.query = query;
          }
          this.$router.replace(next);
        })
        .catch(reason => {
          this.$refs.captchaBox.reset();
        });
    },
    doReg() {
      let params = {
        userPhone: this.currentPhone
      };
      if (this.getOpenId) {
        params.openId = this.getOpenId;
      }
      if (this.getUnionId) {
        params.unionId = this.getUnionId;
      }
      this.$store
        .dispatch('wxReg', params)
        .then(() => {
          let query = this.$route.query;
          let next = {
            name: 'Home'
          };
          if (query.next) {
            next.name = query.next;
            delete query.next;
            next.query = query;
          }
          this.$router.replace(next);
        })
        .catch(reason => {
          Toast({
            content: reason.message,
            duration: 3000
          });
        });
    },
    getCaptcha(type = '1') {
      let params = {
        type: '1',
        user_phone: this.currentPhone,
        code_type: type
      };
      if (this.currentPhone && this.currentPhone !== '') {
        this.$store
          .dispatch('getCaptchNew', params)
          .then(result => {
            console.log(result);
            this.$refs.captchaBox.focus();
            this.startCountdown();
          })
          .catch(reason => {
            console.error(reason);
          });
      } else {
        let self = this;
        Dialog.alert({
          title: 'ERROR',
          content: 'PHONE NUMBER REQUIRED',
          onConfirm: () => {
            self.$router.go(-1);
          }
        });
      }
    },
    startCountdown() {
      this.sent = true;
      this.countdownInstance = setInterval(() => {
        this.countdownTimer--;
        if (this.countdownTimer <= 0) {
          this.sent = false;
          clearInterval(this.countdownInstance);
          this.countdownInstance = null;
          this.countdownTimer = 59;
        }
      }, 1000);
    }
  },
  computed: {
    ...mapGetters(['currentPhone', 'currentCaptcha', 'getOpenId', 'getUnionId', 'getPlatformId', 'getCurrentLocation'])
  }
};
</script>
<style lang="stylus">
#captcha-view {
  padding: 40px;

  a {
    color: color-primary;
  }

  .upper {
    margin-top: 62px;
  }

  .desc {
    margin-bottom: 80px !important;
  }

  .captcha-input-box {
    .md-codebox {
      justify-content: flex-start;
    }
  }

  .captcha-status {
    margin-top: 20px;
    font-size: 24px;
    font-weight: 500;
    color: #999999;
    line-height: 24px;
  }
}
</style>